<template>
  <div class="userlist">
    <!-- 顶部 -->
    <el-card class="usercard">
      <div class="left">
        <img src="@/assets/userhome/icon5.png" alt />
        <li><el-button type="text">修改头像</el-button></li>
      </div>
      <div class="right">
        <li>
          <span class="namelis">登录用户名：</span>
          <span class="list">{{userheader.username}}</span>
        </li>
        <li>
          <span class="namelis">注册时间:</span>
          <span class="list">{{userheader.createTime}} </span>
        </li>
        <li>
          <span class="namelis">账号ID：</span>
          <span class="list">11111000000</span>
        </li>
      </div>
    </el-card>
    <!-- 业务信息 -->
    <el-card class="el-cards">
      <span>业务信息</span>
      <div class="inputlist">
        <div style="width: 500px">
          <el-form ref="form" :model="form" class="elfrom">
            <li class="li">主营车辆</li>
            <el-form-item class="fromitem">
              <div class="ww" style="width: 100%">
                <div>
                  <el-select v-model="car1">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      <span style="float: left">{{ item.label }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px"></span>
                    </el-option>
                  </el-select>
                </div>
                <div>
                  <el-select v-model="car2">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                      <span style="float: left">{{ item.label }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px"></span>
                    </el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
            <li class="li">街道地址</li>
            <el-form-item>
              <el-input style="width: 100%" v-model="userdata.businessAddress" :disabled="true"></el-input>
            </el-form-item>
            <li class="li">联系电话</li>
            <el-form-item>
              <el-input v-model="userdata.businessTel" style="width: 100%" class="inputone" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
    <!-- 联系信息 -->
    <el-card class="el-cards">
      <span>联系信息</span>
      <div class="inputlist">
        <div style="width: 500px">
          <el-form ref="form" :model="form" class="elfrom">
            <li class="li">所在城市</li>
            <el-form-item class="fromitem">
              <div class="ww" style="width: 100%">
                <div>
                  <el-select v-model="ctiy1" >
                    <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <div>
                  <el-select v-model="ctiy2" collapse-tags style="margin-left: 20px">
                    <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
            <li class="li">街道地址</li>
            <el-form-item>
              <el-input v-model="userdata.businessAddress" style="width: 100%" :disabled="true"></el-input>
            </el-form-item>
            <li class="li">联系电话</li>
            <el-form-item>
              <el-input style="width: 100%" class="inputone" v-model="userdata.contactTel" :disabled="true"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getuserBasic, getuserlist } from '../userhome'
import { getItem } from '@/utils/store.js'
export default {
  props: {
    userdatas: {
      type: [Object, Number, String, Array],
      require: true,
    },
  },
  data() {
    return {
      userheader: [],// 顶部头像区域
      car1: '',
      car2: '',
      ctiy1: '',
      ctiy2: '',
      userdata: [], //用户基本信息
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      options: [
        {
          value: '1',
          label: '东风',
        },
        {
          value: '2',
          label: '奥迪',
        },
        {
          value: '3',
          label: '大为',
        },
        {
          value: '4',
          label: '江淮',
        },
        {
          value: '5',
          label: '奇瑞',
        },
      ],
      value1: [],
      value2: [],
      cities: [
        {
          value: 'Beijing',
          label: '北京',
        },
        {
          value: 'Shanghai',
          label: '上海',
        },
        {
          value: 'Nanjing',
          label: '南京',
        },
        {
          value: 'Chengdu',
          label: '成都',
        },
        {
          value: 'Shenzhen',
          label: '深圳',
        },
        {
          value: 'Guangzhou',
          label: '广州',
        },
      ],
      value: '',
    }
  },
  components: {},
  watch: {},
  created() {
   
    this.getuserlis()
    this.getuser()
  },
  mounted() {},
  methods: {
    async getuser() {
      //获取登录用户信息
      let userid = getItem('USER_INFO').data.data.person.userId
      try {
        const { data } = await getuserlist(userid)
        this.userheader = data.data
        console.log(this.userheader, '0000')
      } catch (error) {
        console.log(error)
      }
    },
    async getuserlis() { 
      // let userid = getItem('USER_INFO').data.data.person.userId
      let userid = getItem('USER_INFO').data.data.person.userId
      try {
        const { data } = await getuserBasic(userid)
        if (data.code == 0) {
          this.$message.success('获取用户基本信息成功')
          this.userdata = data.data
          this.car1 = data.data.carBrand
          this.car2 = data.data.carType
          this.ctiy1 = data.data.contactCity
          this.ctiy2 = data.data.contactCounty
          console.log(this.userdata, '获取用户基本信息成功')
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style scoped lang="less">
.userlist {
  .el-cards {
    span {
      margin-left: 30px;
    }
  }
  .elfrom {
    .inputone {
      margin-right: 10%;
    }
    .fromitem {
      .ww {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
      }
    }
  }
  /deep/.el-input__inner {
    height: 30px;
  }
  .left {
    float: left;
    margin: 30px;
    text-align: center;

    li {
      margin-top: 20px;
    }
  }
  .right {
    float: left;

    margin-top: 30px;
    li {
      margin-bottom: 35px;
      .namelis {
        margin-right: 30px;
        display: inline-block;
        width: 100px;
      }
      .list {
        width: 400px;
        text-align: left;
      }
    }
  }
  .inputlist {
    .li {
      margin-left: 0px;
      margin-bottom: 15px;
      color: #939393;
    }
    //width: 800px;
    margin-top: 48px;
    margin-left: 80px;
    span {
      margin-left: 20px;
    }
  }
}
</style>
